<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title>qiaoModel</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <style>
       <style>
        body {
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }
 
        #WebGL {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
           
        }
		
		#Test {
		   
            width: 30%;
            height: 30%;
            position: absolute;
            left: 20;
            top: 20;
           z-index: 2;
        }
		
		
#loading {
    background: #f3815e;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.loadingImage {
    position: relative;
    width: 30px;
    height: 30px;
    background: #2e98df;
    border-radius: 50px;
    animation: loadingImage 1.5s infinite linear;
}
.loadingImage::after {
    position: absolute;
    width: 50px;
    height: 50px;
    border-top: 10px solid #b160d1;
    border-bottom: 10px solid #b160d1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-radius: 50px;
    content: '';
    top: -20px;
    left: -20px;
    animation: loadingImage_after 1.5s infinite linear;
}
@keyframes loadingImage {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
        background: #2ecc71;
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loadingImage_after {
    0% {
        border-top: 10px solid #b160d1;
        border-bottom: 10px solid #b160d1;
    }
    50% {
        border-top: 10px solid #2e98df;
        border-bottom: 10px solid #2e98df;
    }
    100% {
        border-top: 10px solid #b160d1;
        border-bottom: 10px solid #b160d1;
    }
}
		
		
		
    </style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/mycodes-demo.css">

    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="https://threejs.org/examples/../build/three.js"></script>
    <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>
	<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
    <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
	<script src="https://threejs.org/examples/js/WebGL.js"></script>
	<script src="https://threejs.org/examples/js/renderers/CSS2DRenderer.js"></script>
	<script src="js/utils.js"></script>
    <script src="js/textures.js"></script>
    <script src="js/Car.js"></script>
	<script src="js/gauge.min.js"></script>

	
	<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
	<script src="https://threejs.org/examples/js/ShaderTranslucent.js"></script>
	<div id="loading">
    <div class="loadingImage">
	      <div id="WebGL"> 
		  <div id="Test">
		        <canvas data-type="radial-gauge"
				data-width="130%"
				data-height="130%"
				data-units="Pa"
				data-title="压力数据"
				data-value="33.77"
				data-animate-on-init="true"
				data-animated-value="true"
				data-min-value="0"
				data-max-value="220"
				data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
				data-minor-ticks="1"
				data-stroke-ticks="true"
				data-borders="true"
				data-highlights='[
					{ "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
					{ "from": 50, "to": 100, "color": "rgba(255,255,0,.35)" },
					{ "from": 100, "to": 150, "color": "rgba(255,30,0,.55)" },
					{ "from": 150, "to": 200, "color": "rgba(255,0,225,.65)" },
					{ "from": 200, "to": 220, "color": "rgba(0,0,255,.85)" }
				]'
				data-color-plate="#ffffff"
				data-color-major-ticks="#f5f5f5"
				data-color-minor-ticks="#ddd"
				data-color-title="#000"
				data-color-units="#000"
				data-color-numbers="#000"
				data-needle-circle-size="7"
				data-needle-circle-outer="true"
				data-needle-circle-inner="true"
				data-color-needle-shadow-down="#333"
				data-color-needle-circle-outer="#333"
				data-color-needle-circle-outer-end="#211"
				data-color-needle-circle-inner="#211"
				data-color-needle-circle-inner-end="#000"
				data-color-needle-start="rgba(240, 128, 128, 1)"
				data-color-needle-end="rgba(255, 160, 122, .9)"
				data-value-box="true"
				data-animation-rule="bounce"
				data-animation-duration="500"
				data-font-value="Led"
				data-font-numbers="Led"
				data-border-outer-width="1"
				data-border-middle-width="1"
				data-border-inner-width="1"
		      ></canvas>
		  
		  
		  
		  
		  
		  
		  
		  
		        <canvas data-type="radial-gauge"
				data-width="130%"
				data-height="130%"
				data-units="°C"
				data-title="温度数据"
				data-min-value="-50"
				data-max-value="50"
				data-major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
				data-minor-ticks="1"
				data-stroke-ticks="true"
				data-highlights='[
							{"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
							{"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"}
						]'
				data-ticks-angle="225"
				data-start-angle="67.5"
				data-color-major-ticks="#ddd"
				data-color-minor-ticks="#ddd"
				data-color-title="#eee"
				data-color-units="#ccc"
				data-color-numbers="#eee"
				data-color-plate="#222"
				data-border-shadow-width="1"
				data-borders="true"
				data-needle-type="arrow"
				data-needle-width="1"
				data-needle-circle-size="7"
				data-needle-circle-outer="true"
				data-needle-circle-inner="false"
				data-animation-duration="1500"
				data-animation-rule="linear"
				data-color-border-outer="#333"
				data-color-border-outer-end="#111"
				data-color-border-middle="#222"
				data-color-border-middle-end="#111"
				data-color-border-inner="#111"
				data-color-border-inner-end="#333"
				data-color-needle-shadow-down="#333"
				data-color-needle-circle-outer="#333"
				data-color-needle-circle-outer-end="#111"
				data-color-needle-circle-inner="#111"
				data-color-needle-circle-inner-end="#222"
				data-value-box-border-radius="0"
				data-color-value-box-rect="#222"
				data-color-value-box-rect-end="#333"
				data-font-value="Led"
		></canvas>
		  
		 
		  
		  </div>  





		  </div>
		  
	
	</div>
</div>
    <script>
  if (!Array.prototype.forEach) {
		Array.prototype.forEach = function(cb) {
			var i = 0, s = this.length;
			for (; i < s; i++) {
				cb && cb(this[i], i, this);
			}
		}
	}
	document.fonts && document.fonts.forEach(function(font) {
		font.loaded.then(function() {
			if (font.family.match(/Led/)) {
				document.gauges.forEach(function(gauge) {
					gauge.update();
					gauge.options.renderTo.style.visibility = 'visible';
				});
			}
		});
	});
	
	 window.onload = function() {
              document.onkeydown = function() {
                 var e = window.event || arguments[0];
                 //屏蔽F12
                 if(e.keyCode == 123) {
                     alert('火星观察局欢迎您！');
                     return false;
                     //屏蔽Ctrl+Shift+I
                 } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) {
                     alert('友情提醒您，本网站禁止审查元素');
                     return false;
                     //屏蔽Shift+F10
                 } else if((e.shiftKey) && (e.keyCode == 121)){
                     alert('本网站禁止审查元素！');
                     return false;
                 } else if(event.ctrlKey  &&  window.event.keyCode==83 ){ 
                     alert('本网站禁止保存文件！');
                     return false;
                 } 
             };
             //屏蔽右键单击
             document.oncontextmenu = function() {
              alert('火星观察局欢迎您！');
                 return false;
             }
         }
	var timers = [];
	    var stats,model3,model_w,sphere1,light_y,light_r,light_g,RGB_time=0,light1;
        var container, camera, scene, renderer, geometry, material, animate, controls; //常用变量
        var spotLight, mshStdBox; //自定义对象变量
        var target = new THREE.Vector3(0, 30, 0);
        var model, skeleton;
        var webGLW = $('#WebGL').width();
        var webGLH = $('#WebGL').height();
		var now_cars_nums=0,cars_nums_z=15;
		var cars = [];
		var cars_fx=[[-550+150,120-75,0],
		             [-550+150,87-75,0],
	                 [220+150,64-75,1],
	                 [220+150,41-75,1]];
		var Lights=[];
		var time_r=200;
		var time_y=80;
		var time_g=300;
		var light_y_w;
		var objects = [];
		var totx=1, cube;
		var stats;
		var gui;
		var wedu_cg;
		var yali_cg;
		var shuiwei_cg;
		 var mouse = new THREE.Vector3();
         var raycaster =  new THREE.Raycaster();
        init();
        loop();
        bbb();
        function init() {
		
            container = document.getElementById('WebGL');
			document.body.appendChild( container );
            scene = new THREE.Scene();
			scene.position.set(0,-100,0)
            scene.background = new THREE.Color(0xcfcfcf);
		   //scene.background = new THREE.Color(0x000000);
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
            camera.position.set(1000, 400, 700);
			//camera.position.set(420, 420, 420);
            var ambient = new THREE.AmbientLight(0xffffff, 0.1);
            scene.add(ambient);
            lights(); //灯光：聚光灯
		    loadModel(); //添加人物模型
			loadModel2();
			build_cg();
			//plane();
			//initStats();
		   
			gui_init();
		
			for (var i=0;i<5;i++)loadfile(i,150,1.5,28-75,-220-150+150);
			for (var i=0;i<6;i++)loadfile(i,150,0.5,-129+75,-530+150);
			loadfile_RGB();
			
			for(var i=0;i<cars_nums_z;i++){
			     now_cars_nums=now_cars_nums+1;
			     buildMovingCars();
			}
			
			
            rendererScene(); //场景渲染
            OrbitControls(camera, renderer); 
            window.addEventListener('resize', onWindowResize, false); //监听屏幕变化
			
				
			
        }
		
        function lights() {
            //  SpotLight( color：颜色, intensity：强度, distance：发光距离, angle：角度, penumbra：边缘范围, decay：衰减 )
            spotLight = new THREE.SpotLight(0xffffff, 1);
            spotLight.position.set(55, 520, 550);
            spotLight.angle = Math.PI / 4;
            spotLight.penumbra = 0.05; //边缘范围，反比
            spotLight.decay = 2; //衰减系数，反比
            spotLight.distance = 1000; //发光距离
            spotLight.castShadow = true; //阴影
            spotLight.shadow.mapSize.width = 1024;
            spotLight.shadow.mapSize.height = 1024;
            spotLight.shadow.camera.near = 10; //近截面
            spotLight.shadow.camera.far = 205;
            scene.add(spotLight);
			
        }
        function loadModel() {
            var loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/qlhl.glb', function (gltf) {
                model = gltf.scene;
                scene.add(model);
                model.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
                        console.log(object);
                        
                    }
                });
                model.rotation.y = -Math.PI;
                model.scale.set(200, 200, 200);
                model.translateX(-150);
				model.translateY(0);
				model.translateZ(75);
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model);
                scene.add(skeleton);
            });
        }
		
		function loadfile_RGB() {
            var loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/RGB_file11.glb', function (gltf) {
                model = gltf.scene;
                scene.add(model);
                model.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
                        console.log(object);
                    }
                });
                model.scale.set(100, 100, 100);
				model.rotation.y = 0.5*Math.PI;
                model.translateX(-35+75);
				model.translateY(82);
				model.translateZ(190+150);
				var sphere = new THREE.SphereBufferGeometry( 0.0115, 10, 18 );
				light_r = new THREE.PointLight( 0xcc0405, 1.2, 12, 1.8 );
				light_r.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xcc0405 } ) ) );
				light_r.position.set(-0.1,0.233,0.265);
				model.add( light_r );
				console.log("------------------------------");
				console.log(light_r);
				light_y = new THREE.PointLight( 0xff9500, 1.2, 12, 1.8 );
				light_y_w=new THREE.Mesh(sphere, new THREE.MeshBasicMaterial( { color: 0xff9500 } ) )
				light_y.add( light_y_w );
				light_y.position.set(-0.1,0.205,0.265);
				model.add(light_y);
				light_g = new THREE.PointLight( 0x079155, 1.2, 12, 1.8 );
				light_g.add( new THREE.Mesh(sphere, new THREE.MeshBasicMaterial( { color: 0x079155 } ) ) );
				light_g.position.set(-0.1,0.175,0.265);
				model.add(light_g);
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model);
                scene.add(skeleton);
            });
        }
		
		function loadfile(i,d,fx,xx,zz) {
		    
		 
            var loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/file.glb', function (gltf) {
                model = gltf.scene;
                scene.add(model);
                model.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
                        console.log(object);
                    }
                });
                model.rotation.y = fx*Math.PI;
                model.scale.set(6, 6, 6);
				model.translateX(xx);
				model.translateY(52);
				model.translateZ(zz+i*d);
			    var sphere = new THREE.SphereBufferGeometry( 0.1, 30, 98 );
				//light1 = new THREE.PointLight( 0xffff8f, 2.5, 125, 0.5 );
				light1 = new THREE.PointLight( 0xfaaa3c, 20.5, 115, 2.1 );
				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffff8f } ) ) );
				
				light1.position.set(1.6,9.2,0);
				Lights.push(light1);
				model.add( light1 );
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model);
				scene.add(skeleton);
            }); 
				
        }
		
		
		
		 function loadModel2() {
		 
		 
		    
		 
		 
            var loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/qlhl_mian.glb', function (gltf) {
                model = gltf.scene;
                scene.add(model);
                model.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
                        console.log(object);
                    }
                });
                      
                model.rotation.y = -Math.PI;
                model.scale.set(2200, 2200, 2200);
				model.translateX(400-150);
				model.translateY(102);
				model.translateZ(-1050+75);
                
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model);
                scene.add(skeleton);
				
				
				
            });
        }
		
		
		
		
		
		
		
		 function loadModel3() {
             loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/car-lhl-001.glb', function (gltf) {
                model3 = gltf.scene;
				 var obj1,obj4,obj3,obj2;
                scene.add(model3);
                model3.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
						console.log("123333");
                        console.log(object);
                    }
					if(object.name=="node_id2811"){
					     
						model_w=object; 
					}
                });
                model3.rotation.y = 1.56*Math.PI;
                model3.scale.set(30, 30, 30);
				model3.translateX(48);
				model3.translateY(63);
				model3.translateZ(-50);
				 
               
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model3);
                scene.add(skeleton);
            });
        }
		
		  function loadMode4() {
            var loader = new THREE.GLTFLoader();
            loader.load('https://five-great.coding.me/model/bus.glb', function (gltf) {
                model = gltf.scene;
                scene.add(model);
                model.traverse(function (object) {
                    if (object.isMesh) {
                        object.castShadow = true;
                       // console.log(object);
                    }
                });
                model.rotation.y = -Math.PI;
                model.scale.set(200, 200, 200);
 
                // 骨骼显示助手
                skeleton = new THREE.SkeletonHelper(model);
                scene.add(skeleton);
            });
        }
 
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
 
            renderer.setSize(window.innerWidth, window.innerHeight);
			
		
 
        }
 
        function rendererScene() {
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            container.appendChild(renderer.domElement);
			
				   
     
        renderer.setClearColor(0xFFFFFF,1.0);
        document.addEventListener("mousedown",onMouseDown,false);
			
			
				var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
				dragControls.addEventListener( 'dragstart', function () {
					controls.enabled = false;
				} );
				dragControls.addEventListener( 'dragend', function () {
					controls.enabled = true;
				} );
				
				
        }
 
        function OrbitControls(camera, renderer) {
            //OrbitControls控件操作模块
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target=target;//控制的target
            controls.autoRotate = true;//是否自动旋转
            controls.autoRotateSpeed = 0.5;//自动旋转速度，正比
        }
		function  myabs(aa){
		
		    if(aa<0)return -aa;
			else return aa
		}
		function buildMovingCars() {
	      var car = new Car()
		  var cd=Math.floor(Math.random()*4);
		  var now_x=Math.floor(Math.random()*750-550+150);
		  var now_y=cars_fx[cd][1]+Math.floor(Math.random()*3);
		 
		      //var index = Math.floor(Math.random() * colors.length)
              if(now_cars_nums<=1){
			  var car = new Car();
			  car.setPosition(-550+150, 55, 120-75);
		      car.mesh.rotation.y = cars_fx[0][2] * Math.PI;
			  cars.push(car);
			  scene.add(car.mesh);
			  }else{  
			          var flag=0;
					  cars.forEach(function(car) {
			              var angle = car.mesh.rotation.y
		                  var x = car.mesh.position.x,
			               z = car.mesh.position.z;
						   if(z==cars_fx[cd][1]){//如果同一条路比较距离 小于80 不可放置车辆
						        if(cars_fx[cd][1]&& myabs(now_x-x)<130)flag=1;
								//console.log("akak");
						   }
						  
		              })
			     if(flag==0){
				  var car = new Car();
			      car.setPosition(now_x, 55, now_y);
		          car.mesh.rotation.y = cars_fx[cd][2] * Math.PI;
				  cars.push(car);
			      scene.add(car.mesh);
				}
			  
			  }
			
			
	}
	
	
	    function build_f(xx,yy,zz,color1){
		
		 var geometry = new THREE.BoxGeometry( xx, yy, zz );
         var material = new THREE.MeshBasicMaterial( {color: color1} );
         var cube = new THREE.Mesh( geometry, material );
		 return cube;
		
		}
	
	   function build_cg(){
	      
	      wedu_cg = build_f(10,20,10, 0x333333);
		  wedu_cg.position.set(30,10,-40);
		  scene.add(wedu_cg);
		  
		  yali_cg = build_f(100,10,100,0xfaaa3c);
		  yali_cg.position.set(250,45,0);
		  scene.add(yali_cg);
		  
		  shuiwei_cg = build_f(20,30,2,0x079155);
		  shuiwei_cg.position.set(30,-10,50);
	   	  scene.add(shuiwei_cg);
	   
	   }
		
		function carMoving(car) {
		  var angle = car.mesh.rotation.y
		  var x = car.mesh.position.x,
			z = car.mesh.position.z;
			if(x>=220+150 && angle==0 && x<1000){
			    car.setPosition(2301-Math.floor(Math.random() *300), 3000, z);
              
			}else if(x<=-540+150 && angle==1* Math.PI&&x>-1000){
			  car.setPosition(-2301+Math.floor(Math.random() * 300), 3000, z);
              
			}else if(angle==0&& x>=2301){
			     car.setPosition(-550+150, 55,z );
			     
			}else if(angle==1*Math.PI&& x<=-2301){
			     car.setPosition(220+150, 55,z);
			}
			if(x<220+150 && x>-550+150){
			            var cd;
						if(z==cars_fx[0][1]) cd=cars_fx[0][1];
						if(z==cars_fx[1][1]) cd=cars_fx[1][1];
						if(z==cars_fx[2][1]) cd=cars_fx[2][1];
						if(z==cars_fx[3][1]) cd=cars_fx[3][1];
							 var flag=0;
								  cars.forEach(function(car) {
						
									  var xx = car.mesh.position.x,
									   zz = car.mesh.position.z;
									  if(xx<220 && xx>-550){
									  if(zz==cd && xx != x){//如果同一条路比较距离 小于60 不可车辆
											 
											if(cd && myabs(x-xx)<140)flag=1;
									   }
									  }
								  })
							//if(flag==1){
							 //  car.forward(0.001);//停车
							   //console.log("//停车");
							//}else{
							  car.forward(0.5);
							//}
			}else{
			   car.forward(0.5+Math.random() *0.5);
			} 
			// car.forward(0.5+Math.random() *0.5);
       }
	   
	    
	     function gui_init(){
                var h1,h2,h3;
				gui = new dat.GUI({width: window.innerWidth*0.28});
				var param = {
				    // 场景设置
					'xz': true , 
					'background_color': scene.background.getHex(),
					
					//公共设施
					 // 路灯
					 'kg': true,
					 'qd': 20.5,
					 'light1color': 0xfaaa3c,
					 //交通灯控制
					 'light_r': 2,
					 'light_y': 0.8,
					 'light_g': 3,
					//传感器控制
					 //温度传感器
					  'wedu_qy': true,
					  'wedu_x': 30,
					  'wedu_y': 10,
					  'wedu_z': -40,
					  
					 //压力传感器
					  'yali_qy': true,
					  'yali_x': 250,
					  'yali_y': 40,
					  'yali_z': 0,
					
					 //水位传感器
					  'shuiwei_qy': true,
					  'shuiwei_x': 30,
					  'shuiwei_y': -10,
					  'shuiwei_z': 50,
					 'ybp_yb': false
					 
				};
				
				 h1=gui.addFolder( "场景设置" );
				 h1.add( param, 'xz' ).name("主体旋转").onChange( function ( val ) {
				   controls.autoRotate=val;
				 } );
				 h1.addColor( param, 'background_color' ).name("背景颜色：").onChange( function ( val ) {
					scene.background.setHex( val );
				  } );
				 /*h2=h1.addFolder( "灯光设置" );
				   h2.addColor( param, 'light color' ).name("灯光颜色：").onChange( function ( val ) {
					spotLight.color.setHex( val );
					render1();
				   } );
				   h2.add( param, 'intensity', 0, 2 ).name("灯光强度：").onChange( function ( val ) {
					spotLight.intensity = val;
					render1();
				   } );
				   h2.add( param, 'distance', 50, 1000 ).name("发光距离：").onChange( function ( val ) {
					spotLight.distance = val;
					render1();
				   } );
				   h2.add( param, 'angle', 0, Math.PI / 3 ).name("灯光角度：").onChange( function ( val ) {
					spotLight.angle = val;
					render1();
				    } );
				   h2.add( param,'penumbra', 0, 1 ).name("边缘范围：").onChange( function ( val ) {
					spotLight.penumbra = val;
					render1();
				    } );
				   h2.add( param, 'decay', 1, 2 ).name("灯光衰减：").onChange( function ( val ) {
					spotLight.decay = val;
					render1();
				    } );
					*/
				 h1=gui.addFolder( "公共设施" );
					h2=h1.addFolder("路灯");
			        h2.add( param, 'kg' ).name("开关：").onChange( function ( val ) {
				        Lights.forEach(function(light1) {
				           if (val)light1.intensity=20.5 ;
				           else light1.intensity=0; 
		                   })
				    } );
				    h2.add( param, 'qd',0.0,50.0 ).name("灯光强度：").onChange( function () {
					    Lights.forEach(function(light1) {
				         light1.intensity=param.qd;
		               })
				    } );
					h2.addColor( param, 'light1color' ).name("灯光颜色：").onChange( function ( val ) {
					 Lights.forEach(function(light1) {
				         light1.color.setHex( val );
		               })
				    } );
			
			       h2=h1.addFolder( "交通灯控制" );
				   h2.add( param, 'light_r',[0,1,2,3,4,5,6,10,20,30] ).name("红灯(占比):").onChange( function () {
					   time_r=param.light_r*100;
				   } );
				   h2.add( param, 'light_y',[0,0.4,0.8,1,1.5,2] ).name("黄灯(占比):").onChange( function () {
					   time_y=param.light_y*100;
				   } );
			       h2.add( param, 'light_g',[0,1,2,3,4,5,6,10,20,30] ).name("红灯(占比):").onChange( function () {
					   time_g=param.light_g*100;
				   } );
				h1=gui.addFolder( "传感器控制" );
				   h2=h1.addFolder( "温度传感器" );
						h2.add( param, 'wedu_qy').name("启用：").onChange( function (val) {
							 if(val) wedu_cg.position.set(30,10,-40);
							 else wedu_cg.position.set(30,600000,-40);
							
						} );
						h2.add( param, 'wedu_x',-300,300).name("X：").onChange( function () {
							wedu_cg.position.x=param.wedu_x;
							
						} );
						h2.add( param, 'wedu_y',-300,300).name("Y：").onChange( function () {
							wedu_cg.position.y=param.wedu_y;
							
						} );
						h2.add( param, 'wedu_z',-300,300).name("Z：").onChange( function () {
							wedu_cg.position.z=param.wedu_z;
							
						} );
		           h2=h1.addFolder( "压力传感器" );
						h2.add( param, 'yali_qy').name("启用：").onChange( function (val) {
							if(val) yali_cg.position.set(250,40,0);
							 else yali_cg.position.set(50,600000,70);
							
						} );
					
						h2.add( param, 'yali_x',-300,300).name("X：").onChange( function () {
							
							yali_cg.position.x=param.yali_x;
						} );
						h2.add( param, 'yali_y',-300,300).name("Y：").onChange( function () {
							
							yali_cg.position.y=param.yali_y;
						} );
						h2.add( param, 'yali_z',-300,300).name("Z：").onChange( function () {
							
							yali_cg.position.z=param.yali_z;
						} );
				   h2=h1.addFolder( "水位传感器" );
						h2.add( param, 'shuiwei_qy').name("启用：").onChange( function (val) {
							if(val) shuiwei_cg.position.set(30,-10,50);
							 else shuiwei_cg.position.set(50,6000000,70);
							
						} );
						h2.add( param, 'shuiwei_x',-300,300).name("X：").onChange( function () {
							shuiwei_cg.position.x=param.shuiwei_x;
							
						} );
						h2.add( param, 'shuiwei_y',-300,300).name("Y：").onChange( function () {
							shuiwei_cg.position.y=param.shuiwei_y;
							
						} );
						h2.add( param, 'shuiwei_z',-300,300).name("Z：").onChange( function () {
							shuiwei_cg.position.z=param.shuiwei_z;
							
						} );
				 gui.add( param, 'ybp_yb').name("显示仪表盘").onChange( function ( val ) {
				      if(val)animateGauges(  );
					  else stopGaugesAnimation(  );
				 } );
			
		}
	   function RGB_up(){
	   
	    if(RGB_time===0){
						light_r.children[0].material.color.setHex(0xcc0405)
						light_r.color.setHex(0xcc0405)
						light_y.children[0].material.color.setHex(0x26394a)
						light_y.color.setHex(0x26394a)
						light_g.children[0].material.color.setHex(0x26394a)
						light_g.color.setHex(0x26394a)
		
				
                       }
    			     if(RGB_time===time_r){
						light_r.children[0].material.color.setHex(0x26394a)
						light_r.color.setHex(0x26394a)
						light_y.children[0].material.color.setHex(0xff9500)
						light_y.color.setHex(0xff9500)
						light_g.children[0].material.color.setHex(0x26394a)
						light_g.color.setHex(0x26394a)
					   }
					  if(RGB_time===(time_r+time_y)){
						light_r.children[0].material.color.setHex(0x26394a)
						light_r.color.setHex(0x26394a)
					    light_y.children[0].material.color.setHex(0x26394a)
						light_y.color.setHex(0x26394a)
				        light_g.children[0].material.color.setHex(0x079155)
						light_g.color.setHex(0x079155)
			
					   }
					RGB_time=RGB_time+1;
					if(RGB_time>(time_g+time_r+time_y))RGB_time=0;
	   }
	   
	   
    function createSpriteText(txext){
        //先用画布将文字画出
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ffff00";
        ctx.font = "Bold 100px Arial";
        ctx.lineWidth = 4;
        ctx.fillText("ABCDRE",4,104);
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        //使用Sprite显示文字
        let material = new THREE.SpriteMaterial({map:texture});
        let textObj = new THREE.Sprite(material);
        textObj.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);
        textObj.position.set(0,0,98);
        return textObj;
   }
    function onMouseDown(event){
         event.preventDefault();
         //将屏幕像素坐标转化成camare坐标
         mouse.x = (event.clientX/renderer.domElement.clientWidth)*2-1;
         mouse.y = - (event.clientY/renderer.domElement.clientHeight)*2+1;
         //设置射线的起点是相机
         raycaster.setFromCamera( mouse, camera );
         //将射线投影到屏幕，如果scene.children里的某个或多个形状相交，则返回这些形状
         //第二个参数是设置是否递归，默认是false，也就是不递归。当scene里面添加了Group对象的实例时，就需要设置这个参数为true
         //第一个参数不传scene.children也可以，传一个group.children或一个形状数组都可以（这样可以实现一些特别的效果如点击内部的效果）
         //另外，因为返回的是一个数组，所以遍历数组就可以获得所有相交的对象，当元素重叠时，特别有用
         var intersects = raycaster.intersectObjects(scene.children,true);  
         if(intersects.length>0){
            var currObj = intersects[0].object;
            console.log(currObj);
            currObj.material.color = new THREE.Color(0x493048);
            
         }
         render();
    }
	   
	   
	  
	   
	   
	   
	   
	      
	   
 function bbb(){
 
	
     //
	 //
	}; 
		
	
	function animateGauges(  ) {
	
		
	    	   document.gauges.forEach(function(gauge) {
			 timers.push(setInterval(function() {
				gauge.value = Math.random() *
					(gauge.options.maxValue - gauge.options.minValue)/8 +
					(gauge.options.minValue+gauge.options.maxValue)/2;
			}, gauge.animation.duration + 50));
			});
	}
	
	
	  
	  function stopGaugesAnimation(  ) {
		timers.forEach(function(timer) {
			clearInterval(timer);
		});
	}
	   
	   
	   
	   
		function loop() {
		    
		    cars.forEach(function(car) {
			     carMoving(car);
		    })
			
			//if(light1){console.log("121211111111111");console.log(light1);}
			if(light_y && light_r && light_g)RGB_up();
		   if (controls) controls.update();
		  renderer.render(scene, camera)
		  requestAnimationFrame(loop)
		   //stats.update();
		  
		}
		$("#loading").fadeOut(3000);
    </script>
</body>
 
</html>